<template>
  <el-container>
    <el-header>
      <Title :title="titleName" :SecTitle="SecTitleName"></Title>
    </el-header>
    <el-main :style="styleMain">
      <el-row >
         <el-col>
          <el-form :inline="true" :model="form1">
            <el-form-item label="原因" >
              <el-input v-model="form1.reason" placeholder="请输入原因">
              </el-input>
            </el-form-item>            
            <el-form-item label="状态" :style="styleMl_20">
              <el-select v-model="form1.state" placeholder="请选择">
                <el-option
                  v-for="item in stateOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                  :disabled="item.disabled"
                >
                </el-option>
              </el-select>
            </el-form-item>

            <el-form-item :style="styleMl_20">
            <el-button type="success" @click="search"> 筛选 </el-button>
            </el-form-item>

            <el-form-item :style="styleAddBtn">
              <el-button  type="success" @click="adddialogFormVisible = true;">
                    添加
              </el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>

      <el-row> 
          <el-col>
              <el-table :data='OCatas'>
                  <el-table-column label="取消原因" prop="refundWhy" width="400%">
                  </el-table-column>
                  <el-table-column label="创建时间" prop="created">
                    <template slot-scope="scope">
                          {{goTime(scope.row.created)}}
                      </template>
                  </el-table-column>
                  <el-table-column label="状态" prop="status">
                    <template slot-scope="scope">
                          {{getPerStatus(scope.row.status)}}
                      </template>
                  </el-table-column>
                 <el-table-column label="操作" width="200%">
                        <template slot-scope="scope">
                            <el-button type="text" @click="dialogFormVisible = true;edit(scope.row)">编辑</el-button>
                            <el-button
                            @click.native.prevent="deleteRow(scope.$index, OCatas,scope.row.id)"
                            type="text">
                            删除
                            </el-button>
                        </template> 
                  </el-table-column>
              </el-table>
              
              <!-- 编辑弹出框 -->
              <el-dialog title="编辑数据" :visible.sync="dialogFormVisible" center>
                    <el-form  :model="form">
                    <el-form-item label="原因:">
                        <br>
                        <el-input v-model="form.reason" placeholder="请输入原因"></el-input>
                    </el-form-item>
                    <el-form-item label="状态">
                        <br>
                        <el-radio-group v-model="form.state">
                        <el-radio label="0">启用</el-radio>
                        <el-radio label="1">禁用</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="save">确 定</el-button>
                </div> 
                </el-dialog>
                <!-- 添加弹出框 -->
                <el-dialog title="添加数据" :visible.sync="adddialogFormVisible" center>
                    <el-form  :model="form">
                    <el-form-item label="原因:">
                        <br>
                        <el-input v-model="form.reason" placeholder="请输入原因"></el-input>
                    </el-form-item>
                    <el-form-item label="状态">
                        <br>
                        <el-radio-group v-model="form.state">
                        <el-radio label="0">启用</el-radio>
                        <el-radio label="1">禁用</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="adddialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="addBtn">确 定</el-button>
                </div> 
                </el-dialog>
          </el-col>
      </el-row>
    </el-main>
    <el-footer :style="styleMain">
         <Paging
        @pagesizeChange="getPagesize"
        @currentPageChange="getCurrentPage"
        :total="total"
        :pagesize="pagesize"
        :currentPage="currentPage"
      ></Paging>    
       </el-footer>
  </el-container>
</template>

<script>
import Title from "../../components/common/title.vue";
import Paging from "../../components/paging/paging.vue";
export default {
  data: function () {
    return {
      //标题
      titleName:'退款管理',
      SecTitleName:'订单取消',
      //主体
      styleMain:{
        padding:"20px 0px",
      },
      styleMl_20:{
        marginLeft:'20px',
      },
      styleAddBtn:{
        float:"right",
        zIndex:"3",
        marginBottom:"20px",
      },
      total:5,
      pagesize: 4,
      currentPage:1,
      dialogFormVisible:false,
      adddialogFormVisible:false,
      editID:0,
    // 搜索栏
        form1: {
        reason:"",
        state: "",
      },
      stateOptions: [
        {
          value: "0",
          label: "启用",
        },
        {
          value: "1",
          label: "禁用",
        }
      ],
    //  table
        OCatas:[
        {
            refundWhy:'',
            created:'',
            status:'',
        },
      
        ],
    // 编辑
        form:{
            reason:'',
            state: '',
        },
    };
  },
  components: {
    Title,
    Paging,
  },
  created(){
    //页面更新
    this.update()
  },
  methods:{
     //页面更新
   update(){
     //页面更新访问后台获取table数据
    this.axios.post("/refundReason/list",{
      page: this.currentPage,
      pageSize: this.pagesize
    },
    )
    .then((res)=>{
    // console.log(res.data.data);
    this.OCatas=res.data.data
    this.total=res.data.count
    })
    .catch((err)=>{
      console.log(err)
    })
   },
    // 搜索栏
    search(){
        // console.log(this.form1)
    this.axios.post("/refundReason/list",{
        refundWhy:this.form1.reason,
        status: this.form1.state,
        page: this.currentPage,
        pageSize: this.pagesize
    },)
    .then((res)=>{
    // console.log(res.data.data);
    this.OCatas=res.data.data
    this.total=res.data.count
    this.currentPage=1;
    })
    .catch((err)=>{
      console.log(err)
    
    })
    },
    addBtn(){
      console.log(this.form)
      this.axios.post('refundReason/insert',{
      refundWhy:this.form.reason,
      status: this.form.state
      },)
      .then((res)=>{
        console.log(res.data)
        //页面更新
        this.form={}
        this.update()
      })
      .catch((err)=>{
        console.log(err)
      })
    },
    //编辑
    edit(row){
        this.editID=row.id
    },
    save(){
      console.log(this.form)
      this.axios.post('/refundReason/update',{
      id:this.editID,
      refundWhy:this.form.reason,
      status:this.form.state,
      },)
      .then((res)=>{
        console.log(res.data.msg)
         this.form={}
        //页面更新
        this.update()
      })
    },
    //删除
    deleteRow(index, rows,id) {
        this.axios.post('/refundReason/delete/'+id,{
        },
        
        )
        .then((res)=>{
          console.log(res)
        })
        .catch((err)=>{
          console.log(err)
        })
        rows.splice(index, 1);
    },
     getPerStatus(value){
        if(value==0){
          return '启用'
        }else {
          return '禁用'
        }
      },
      //时间格式化
    goTime(val) {
      var timestamp4 = new Date(val);
      //利用拼接正则等手段转化为yyyy-MM-dd hh:mm:ss 格式
      return timestamp4.toLocaleDateString().replace(/\//g, "-") + " " + timestamp4.toTimeString().substr(0, 8); 
  },
      //子组件传入pagesize 分页
    getPagesize(val) {
      this.pagesize = val;
        //页面更新
      this.update()
    },
    //子组件传入CurrentPage
    getCurrentPage(val) {
      this.currentPage = val;
        //页面更新
      this.update()
    },
    },

};
</script>

<style lang="less" scoped>

</style>